<template>
  <div class="home_bos">
    <div class="head">
      <img class="nlogo13700" src="../../assets/nlogo13700.png" alt="" />
      <div class="head_bos">
        <div class="head_title">环境检测</div>
        <div class="head_border" />
        <div class="head_title">电子税务局APP下载</div>
        <div class="head_border" />
        <div class="head_title">公众服务</div>
        <div class="head_border" />
        <div class="head_title">办税指南</div>
        <div class="head_border" />
        <div class="head_title">办税日历</div>
        <div class="loginBtn" @click="goPath('/login')">
          <svg
            data-v-760405d0=""
            fill="none"
            viewBox="0 0 16 16"
            width="1em"
            height="1em"
            class="t-icon t-icon-user"
            style="height: 14px; margin-right: 2px; font-size: 15px"
          >
            <path
              data-v-760405d0=""
              fill="currentColor"
              d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
              fill-opacity="0.9"
            />
          </svg>
          <div>登录</div>
        </div>
      </div>
    </div>
    <div class="banner">
      <img class="banner_img" src="../../assets/home/banner.jpg" alt="" />
      <div class="banner_box">
        <img class="banner1" src="../../assets/home/banner1.png" alt="" />
        <img class="banner2" src="../../assets/home/banner2.png" alt="" />
      </div>
    </div>

    <div class="notice">
      <div>
        <span style="font-weight: bold">办税日历：</span>
        <span>{{ text }}</span>
      </div>
    </div>
    <div class="home_box">
      <div class="title">常用功能</div>
      <div class="list">
        <div v-for="(item, index) in homeList" class="home_list">
          <img v-if="item.value == '1'" src="@/assets/home/nav1.png" alt="" />
          <img v-if="item.value == '2'" src="@/assets/home/nav2.png" alt="" />
          <img v-if="item.value == '3'" src="@/assets/home/nav3.png" alt="" />
          <img v-if="item.value == '4'" src="@/assets/home/nav4.png" alt="" />
          <img v-if="item.value == '5'" src="@/assets/home/nav5.png" alt="" />
          <img v-if="item.value == '6'" src="@/assets/home/nav6.png" alt="" />
          <img v-if="item.value == '7'" src="@/assets/home/nav7.png" alt="" />
          <img v-if="item.value == '8'" src="@/assets/home/nav8.png" alt="" />
          <div class="label">{{ item.label }}</div>
          <div class="info">{{ item.info }}</div>
        </div>
      </div>
    </div>
    <div class="home_info">
      <div class="info_bos">
        <div>
          <div style="margin-bottom: 8px">
            <span style="margin-right: 24px">主办单位：国家税务总局山东省电子税务局</span>
            <span>版权所有：国家税务总局</span>
          </div>
          <div>地址：山东省济南市市中区英雄山路155号</div>
        </div>
        <img class="dang" src="@/assets/home/dang.png" alt="" />
      </div>
    </div>
    <div class="home_bot">
      <div class="bot_bos">
        <span style="margin-right: 24px">网站标识码：bm29150011</span>
        <span style="margin-right: 24px">鲁ICP备19020386号-2</span>
        <img style="margin-right: 4px" src="@/assets/logo.png" alt="" />
        <span>鲁公网安备 37010302000687号</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import Http from "@/utils/api";
const text = ref<any>("");
const homeList = [
  {
    value: "1",
    img: "@/assets/home/nav1.png",
    label: "简易确认式申报",
    info: " 对业务简单纳税人提供税费种预填服务，纳税人可通过该功能快捷完成多个税费种申报。 ",
  },
  {
    value: "2",
    label: "税费缴纳",
    info: "税务机关向纳税人、扣缴义务人、代征代售人、缴费人征收税款、社保费、非税收入。",
  },
  {
    value: "3",
    label: "蓝字发票开具",
    info: "因发生销售业务或交易事项时所开具用于证明业务内容真实性的合格凭证。",
  },
  {
    value: "4",
    label: "居民企业（查账征收）企业所得税月（季）度申报",
    info: "实行查账征收方式的企业在月或季度终了之日起15日内，进行月（季）度预缴申报。",
  },
  {
    value: "5",
    label: "综合关联式申报",
    info: "对业务复杂的纳税人提供税费种预填服务，纳税人可通过该功能快捷完成多个税费种申报。",
  },
  {
    value: "6",
    label: "开具税收完税证明",
    info: "税务机关为证明纳税人已经缴纳税款或者已经退还纳税人税款而开具的凭证。",
  },
  {
    value: "7",
    label: "办税进度及结果信息查询",
    info: "对纳税人提供涉税事项办理进度及结果的查询界面，纳税人可以通过该功能快速查看业务办理情况。",
  },
  {
    value: "8",
    label: "增值税留抵税额退税",
    info: "对符合条件的增值税一般纳税人产生的留抵税额，按照一定的计算公式予以计算退还。",
  },
];
function goPath(url: any) {
  router.push(url);
}

onMounted(() => {
  Http.Get("api5", {}).then((res: any) => {
    if (res.code == 1) {
      text.value = res.data.read_calendar;
    } else {
      ElMessage({
        message: res.message,
        type: "error",
        plain: true,
      });
    }
  });
});
</script>

<style lang="scss" scoped>
.home_bos {
  width: 100%;
  // padding-top: 56px;
  background-color: #f7f8fa;

  .head {
    position: fixed;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0 67px 0 24px;
    background-color: #4285f4;

    .nlogo13700 {
      height: 43px;
    }

    .head_bos {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #fff;

      .head_title {
        height: 56px;
        padding: 0 10px;
        line-height: 56px;
        cursor: pointer;

        &:hover {
          background-color: #699ff5;
        }
      }

      .head_border {
        width: 1px;
        height: 16px;
        margin: 0 6px;
        background: #fff;
        opacity: 0.45;
      }

      .loginBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 32px;
        margin-left: 20px;
        font-size: 14px;
        line-height: 32px;
        color: hsl(0deg 0% 100% / 90%);
        text-align: center;
        cursor: pointer;
        background-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#ffb361),
          to(#e76f0f)
        );
        background-image: linear-gradient(180deg, #ffb361, #e76f0f);
        border-radius: 3px;
      }
    }
  }

  .banner {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 596px;

    .banner_img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 596px;
    }

    .banner_box {
      position: absolute;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 1184px;
      height: 596px;

      .banner1 {
        width: 300px;
        height: 60px;
      }

      .banner2 {
        width: 300px;
        height: 60px;
        margin-top: 20px;
        margin-left: 150px;
      }
    }
  }

  .notice {
    width: 100%;
    height: 50px;
    padding-top: 5px;
    margin-top: -10px;
    font-size: 14px;
    color: #000000e6;
    background-color: #f1f2f3;

    div {
      width: 1184px;
      margin: 0 auto;
      line-height: 50px;
    }
  }

  .home_box {
    width: 1184px;
    margin: 14px auto;
    overflow-x: hidden;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 5.88%);
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 5.88%);

    .title {
      height: 80px;
      font-size: 28px;
      font-weight: bold;
      line-height: 80px;
      color: #333;
      text-align: center;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .home_list {
        width: 296px;
        height: 266px;
        padding-top: 35px;
        cursor: pointer;
        border-top: 1px solid #ececec;
        border-right: 1px solid #ececec;

        &:hover {
          .label {
            color: #649cf5;
          }
        }

        img {
          width: 70px;
          height: 70px;
          margin: 0 113px;
        }

        .label {
          display: -webkit-box;
          width: 296px;
          padding: 0 48px;
          margin-top: 12px;
          overflow: hidden;
          font-size: 19px;
          font-weight: bold;
          color: #333;
          text-align: center;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .info {
          padding: 0 35px;
          margin-top: 12px;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }

  .home_info {
    width: 100%;
    height: 84px;
    background-color: #fff;

    .info_bos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1184px;
      margin: 0 auto;
      font-size: 14px;
      color: #333;

      .dang {
        width: 80px;
        height: 80px;
      }
    }
  }

  .home_bot {
    width: 100%;
    height: 36px;
    background-color: #e4e4e4;

    .bot_bos {
      display: flex;
      align-items: center;
      width: 1184px;
      height: 36px;
      margin: 0 auto;
      font-size: 14px;
      color: #333;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
